<template>
  <div class="share-records">
    <div class="share-records-top">
      <div class="title"
      v-for="(item,index) in option"
      :key="index"
      @click="select(index)">
        <div class="select" :style="item.isSelect == true ? item.style : ''">
        {{item.name}}
          <div class="select-line"
               v-if="item.isSelect == true"></div>
        </div>
      </div>
      <div class="dropdown"
      @click="filter_btn"
      >
        <p>{{defaultFilter}}</p>
        <image :src="dropdownImg"></image>
      </div>
    </div>
    <div class="share-records-content">
      <item class="list"
      :info="list"
      :status="status"
      :libraryData="libraryData"
      :shareData="shareData"
      @deleteArticle="deleteArticle"/>
    </div>
    <SelectorOne
      :title="'选择筛选条件'"
      :status="filterTypesShow"
      :allClass="filterTypes"
      @closeModal="filterTypesShow = !filterTypesShow"
      @choose_tap="choosetap"
    ></SelectorOne>
  </div>
</template>
<script>
import item from "./components/shareRecordItem";
import WXAJAX from "@/utils/request";
import SelectorOne from "@/components/selectorOne";

export default {
  components: {
    item,
    SelectorOne
  },
  data() {
    return {
      page: 1,
      isLoading: false, //数据加载中
      list: [],
      //控制tab切换
      option:{
        Shared:{
          isSelect:true,
          name:'已分享文章',
          type:'2',
          style:'color:#51CDCB'
        },
        library:{
          isSelect:false,
          name:'企业文库',
          type:'1',
          style:'color:#51CDCB'
        }
      },
      filterTypes: [
        { name: "最新发布", id: "newest" },
        { name: "获客最多", id: "most" }
      ],
      filterCriteria:'最新发布',
      filterTypesShow:false,
      dropdownImg:WXAJAX.imgBackUrl+'/product-index/down-s.png',
      //控制item组件样式的参数
      status:2,
      shareData:'',
      libraryData:'',
      companyId:wx.getStorageSync('COMPANYID'),
      page:1,
      queryType:1,
      defaultFilter:'最新发布'
    };
  },
  watch:{
    status(newVal,old){
      if(newVal == 2){
          this.getqueryDynamicData(2,1);
      }else if(newVal == 1){
          this.getqueryDynamicData(1,1);
      }
    }
  },
  mounted() {
  },
  created() {
    console.log(this)
  },
  async onPullDownRefresh() {
      this.page = 1;
      this.libraryData = '';
      this.shareData = ''
      await this.getqueryDynamicData(this.status,this.queryType,this.page);
      wx.stopPullDownRefresh();
    },
    async onReachBottom() {
      if (this.isLoading) {
        return;
      }

      await this.getqueryDynamicData(this.status,this.queryType,this.page);
   },
  methods: {
    //
    async getqueryDynamicData(type,queryType,page) {
      // if (this.isLoading) return;
      this.isLoading = true;
      wx.showLoading({});
      try {
        let data = await WXAJAX.POST(
          { type:type,queryType:queryType,pageNum:page},
          "",
          "/customerEssay/queryDynamicData"
        );
        if (data) {
            if(this.page === 1){
              if(this.status == 1){
                this.libraryData = data.list || [];
              }else if(this.status == 2){
                this.shareData = data.list || [];
              }
            }else{
              if(this.status == 1){
                this.libraryData = [...this.libraryData, ...data.list] || [];
              }else if(this.status == 2){
                this.shareData = [...this.shareData, ...data.list] || [];
              }
            }
            this.page++;
            this.list = data.list;
        }
        this.isLoading = false;
        wx.hideLoading();
      } catch (error) {
        this.isLoading = false;
        wx.hideLoading();
      }
    },
    getDeleteByDynamicid(id){
      console.log(id)
      wx.showLoading({
          title: '加载中',
          mask:true
      });
      WXAJAX.POSTA(
        { dynamicId:id,companyId:this.companyId},
        "",
        "/customerEssay/deleteByDynamicId"
      ).then((data)=>{
        console.log(data)
        if(data.code == 200){
          this.page = 1
          this.getqueryDynamicData(this.status,this.queryType,this.page)
          setTimeout(function(){
           wx.showToast({
             title:'已成功！',
             duration:2000
           })
          },1000)
        }
      })
    },
    //唤出筛选条件
    filter_btn(){
      this.filterTypesShow = true
    },
    //点击筛选条件后执行的事件
    choosetap(id,name){
      this.defaultFilter = name
      this.page = 1

      //置空数组
      this.libraryData = []
      this.shareData = []
      if(id == 'newest'){
        this.queryType = 1
        this.filterTypesShow = false
        console.log(this.filterTypesShow )
        this.getqueryDynamicData(this.status,this.queryType);

      }else if(id == 'most'){
        this.filterTypesShow = false
        this.queryType = 2
        this.getqueryDynamicData(this.status,this.queryType);

      }
    },
    //点击切换
    select(i){
      this.defaultFilter = '最新发布'
      this.page = 1
      for(var j in this.option){
        this.option[j].isSelect = false
        this.option[i].isSelect = true
        this.status = this.option[i].type
      }
    },
    //删除文章按钮
    deleteArticle(id){
      this.getDeleteByDynamicid(id)
    },

  },
  onShow() {
     this.page = 1
     this.getqueryDynamicData(this.status,1);
  }
};
</script>
<style scoped>
  .share-records{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
  }
  .share-records-top{
    width: 100%;
    height: 88upx;
    display: flex;
    position: fixed;
    top: 0;
    justify-content:space-around;
    font-size: 32upx;
    color: #787878;
    background: #FFFFFF;
    align-items: center;
  }
  .select{
    box-sizing: border-box;
    padding-top: 27upx;
    display: block;
    height: 88upx;
    display: flex;
    flex-direction: column;
    align-items:center;
    position: relative;
  }
  .select-line{
    display: block;
    width: 100%;
    height: 4upx;
    background-color: #51CDCB;
    position: absolute;
    bottom: 0;
  }
  .share-records-content{
    flex: 1;
    padding: 118upx 30upx 0 30upx;
  }
  .dropdown{
    width: 200upx;
    height: 60upx;
    background-color: #F5F5F6;
    border-radius: 30upx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28upx;
    color: #A8A8A8;
    font-size: 28upx;
    float: right;
  }
  .dropdown image{
    width: 20upx;
    height: 20upx;
    margin-left: 8upx;
  }
  .list{
    margin-top: 80upx;
  }
</style>
